<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
    <include file="Inc/basic_css"/>
    <include file="Inc/basic_js"/>
    <import type="js" basepath="__JS__" file="AjaxFileUpload,imgpre,admin" />
    <import type="js" basepath="__PLUGIN__" file="ueditor.ueditor#config,ueditor.ueditor#all#min,ueditor.lang.zh-cn.zh-cn" />
    <link rel="stylesheet" type="text/css" href="__PLUGIN__/bootstrap-datepicker/css/datepicker.css" />
    <script type="text/javascript" src="__PLUGIN__/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
    <style type="text/css">
        *{
            margin:0px;
            padding:0px;
        }
        body, button, input, select, textarea {
            font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
        }
        #container {
            width:600px;
            height:600px;
            float: left;
            margin-top: 10px;
        }
        .topbox{
            width: 600px;
            text-align: left;
            cursor: pointer;
        }
        .topbox .btn{
            margin-top: 10px;
        }
        .topbox span{
            font-size: 14px;
            line-height: 23px;
        }
        .hvr-sweep-to-right:hover, .hvr-sweep-to-right:focus, .hvr-sweep-to-right:active {
            color: #fff;
        }
        button{
            outline: none;
            border: 0;
        }
        .hvr-sweep-to-right {
            display: inline-block;
            vertical-align: middle;
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
            box-shadow: 0 0 1px transparent;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            -moz-osx-font-smoothing: grayscale;
            position: relative;
            -webkit-transition-property: color;
            transition-property: color;
            -webkit-transition-duration: .3s;
            transition-duration: .3s;
            background: #3598dc;
            color: #fff;
        }
        .button {
            padding: 8px 10px;
            cursor: pointer;
            background: 0 0;
            text-decoration: none;
            font-size: 1.2em;
            color: #666;
            -webkit-tap-highlight-color: transparent;
        }
        .hvr-sweep-to-right:hover:before, .hvr-sweep-to-right:focus:before, .hvr-sweep-to-right:active:before {
            -webkit-transform: scaleX(1);
            transform: scaleX(1);
        }
        .hvr-sweep-to-right {
            display: inline-block;
            vertical-align: middle;
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
            box-shadow: 0 0 1px transparent;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            -moz-osx-font-smoothing: grayscale;
            position: relative;
            -webkit-transition-property: color;
            transition-property: color;
            -webkit-transition-duration: .3s;
            transition-duration: .3s;
            background: #3598dc;
            color: #fff;
        }
        .hvr-sweep-to-right:before {
            content: "";
            position: absolute;
            z-index: -1;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: #2178b4;
            -webkit-transform: scaleX(0);
            transform: scaleX(0);
            -webkit-transform-origin: 0 50%;
            transform-origin: 0 50%;
            -webkit-transition-property: transform;
            transition-property: transform;
            -webkit-transition-duration: .3s;
            transition-duration: .3s;
            -webkit-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
        }
        .button[disabled] {
            opacity: 0.6!important;
            color: #ffffff!important;
        }

    </style>

</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<body class="page-header-fixed" onload="init();">
<!-- BEGIN HEADER -->
<include file="Inc/head"/>
<!-- END HEADER -->
<div class="clearfix"></div>
<!-- BEGIN CONTAINER -->
<div class="page-container">
    <!-- BEGIN SIDEBAR -->
    <include file="Inc/left"/>
    <!-- END SIDEBAR -->
    <!-- BEGIN PAGE -->
    <div class="page-content">

        <!-- BEGIN STYLE CUSTOMIZER -->
        <include file="Inc/theme"/>
        <!-- END BEGIN STYLE CUSTOMIZER -->
        <!-- BEGIN PAGE HEADER-->
        <div class="row">
            <div class="col-md-12">
                <!-- BEGIN PAGE TITLE & BREADCRUMB-->
                <h3 class="page-title">
                    {$cfg.title}<if condition="$dataInfo.id gt 0 ">修改信息<else />添加信息</if> <small></small>
                </h3>
                <ul class="page-breadcrumb breadcrumb">
                    <li><i class="fa fa-home"></i><a href="{:U('Index/index')}">首页</a> <i class="fa fa-angle-right"></i></li>
                    <li><a href="#">路线设置</a><i class="fa fa-angle-right"></i></li>
                    <li><a href="#">{$cfg.title}<if condition="$dataInfo.id gt 0 ">修改信息<else />添加信息</if></a><i class="fa fa-angle-right"></i></li>
                    <li><a href="#">{$lang}</a></li>
                </ul>					<!-- END PAGE TITLE & BREADCRUMB-->
            </div>
        </div>
        <!-- END PAGE HEADER-->
        <!-- BEGIN PAGE CONTENT-->
        <div class="row">
            <div class="col-md-12">
                <!-- BEGIN EXAMPLE TABLE PORTLET-->
                <div class="portlet">
                    <!--
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="fa fa-reorder"></i>站点信息
                        </div>
                    </div>-->
                    <form class="form-horizontal" action="{:U('Line/save')}"  id="submit_form">
                        <input type="hidden" name="id" value="{$dataInfo.id}" />
                        <input type="hidden" name="back_url" value="{$back_url}" />
                        <input type="hidden" name="lang" value="{$lang}" />
                        <input type="hidden" name="area_id" value="{:($dataInfo['area_id'])?$dataInfo['area_id']:$_GET['area_id']}" />
                        <input type="hidden" name="spot" id="spot" value="{$dataInfo.spot}" />
                        <div class="portlet-body form">
                            <!-- BEGIN FORM-->
                            <div class="form-body">
                                <div class="form-group">
                                    <label class="col-md-3 control-label">路线名称({$lang})：</label>
                                    <div class="col-md-4">
                                        <input type="text" class="form-control" name="title_{$lang}" id="title_{$lang}" value="{$dataInfo["title_$lang"]}"/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-3 control-label">路线简介({$lang})：</label>
                                    <div class="col-md-4">
                                        <textarea class="form-control" name="intro_{$lang}">{$dataInfo["intro_$lang"]}</textarea>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-3 control-label">图片：</label>
                                    <div class="col-md-4">
                                        <input type="hidden" name="pic_path" id="album_path" size="50" value="{$dataInfo.pic_path}" />
                                        <script type="text/javascript" src="__JS__/AjaxFileUpload.js.php?fype=album&UpFile={:urlencode('__UPLOAD__')}&tourl={:urlencode(U('Upload/upOne'))}&url=__ROOT__"></script>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-3 control-label">所属景区：</label>
                                    <div class="col-md-4">
                                        <select class="form-control input-medium" name="area_id" id="area_id">
                                            <option value="">请选择景区</option>
                                            <foreach name="areaList" item="item">
                                                <option value="{$item.id}"<eq name="item.area_id" value="$item.id">selected</eq>> {$item.title_cn}</option>
                                            </foreach>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-3 control-label">坐标拾取：</label>
                                    <div class="col-md-4">
                                        <span>*点击地图添加标记，点击标记点删除,点击生成路线按钮生成路线图，删除标记点后需要重新生成路线图。</span>
                                        <div class="btn">
                                            <a id="createPolyline" class="btn blue  dropdown-toggle">生成路线</a>
                                            <a id="deleteAllOverlays" class="btn blue  dropdown-toggle">删除所有标记点</a>
                                        </div>
                                        <div id="container"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-actions top fluid ">
                            <div class="col-md-offset-3 col-md-9">
                                <button class="btn green" type="submit">提交</button>
                                <button class="btn default" type="button" id="cancel" onclick="history.go(-1)">返回</button>
                            </div>
                        </div>
                    </form>
                    <!-- END FORM-->



                </div>
            </div>
            <!-- END EXAMPLE TABLE PORTLET-->
        </div>
    </div>
    <!-- END PAGE CONTENT -->
</div>
<!-- END CONTAINER -->
<!-- BEGIN FOOTER -->
<include file="Inc/foot"/>
<!-- END FOOTER -->
<!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) -->

<!-- END CORE PLUGINS -->
<!-- BEGIN PAGE LEVEL SCRIPTS -->
<script src="__JS__/app.js" type="text/javascript"></script>
<script src="__JS__/form-components.js"></script>
<script src="__JS__/controllers/new/edit.js" type="text/javascript"></script>

<!-- END PAGE LEVEL SCRIPTS -->
<script>
    jQuery(document).ready(function() {
        App.init(); // initlayout and core plugins
        NewValidation.init();
        FormComponents.init();
    });
</script>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=JEJBZ-VZC3J-NNBFL-KRWHH-XJV6V-MJF2I"></script>
<script>
    // 初始化
    var init = function() {
        // 经纬度，窗口信息，经纬度对象，选中的坐标数组中的坐标点索引值 路线路径 路线 路线路径备份 路线备份 polylinePath, polyline, polylinePaths, polylines 创建map地图上下文变量
        var Lat, Lng, info, latLng, selectIndexPoint, map, name, markers//生成变量名
        // 是否生成路线
        var isPolyline = false
        // 计数
        var count = 1
        // 坐标点名称
        var pointInfo = String
        // pointArr选中的坐标数组 polylineArr路线所需的坐标数组 latlngs2坐标数组备份 markersArray 坐标点数组（腾讯地图格式）
        var [pointArr, latlngs2, polylineArr, pointArrcopy, markersArray, markersArrays] = [[], [], [], [], [], []]
        var markersInitArray = [
            <volist name="spotList" id="item">
                {Lat: {$item.lat}, Lng: {$item.lng}, id: {$item.id},content: '{$item.title_cn}'},
            </volist>
        ]
        var polylinePath = [
            <volist name="checkSpotList" id="item">
            new qq.maps.LatLng({$item.lat}, {$item.lng}),
            </volist>
        ]
        var center = new qq.maps.LatLng(40.997713, 117.929621) //地图中心点
        $('#createPolyline').click(function(){
            let new_arr = pointArr.map(obj => {return obj.id})
            var str=new_arr.join(",");
            $('#spot').val(str)
        })
        map = new qq.maps.Map(document.getElementById("container"),{
            center: center,
            zoom: 14
        });
        var polyline = new qq.maps.Polyline({
            path: polylinePath,
            strokeColor: '#00aa00',
            strokeWeight: 3,
            editable: false,
            strokeLinecap: 'round',
            map: map
        });
        if(markersInitArray.length>0){
            var initarr = []
            for (let prop of markersInitArray) {
                initarr.push('new qq.maps.LatLng('+prop.Lat+','+prop.Lng+')');
            }
            for(var i = 0;i < initarr.length; i++) {
                (function(n){
                    markers = new qq.maps.Label({
                        position: eval(initarr[n]),
                        map: map,
                        style: {color:"#fff",backgroundColor:"#00aa00",border: 0,padding: "1px 4px"},
                        content: markersInitArray[n].content
                    });
                    markersArrays.push(markers)
                    qq.maps.event.addListener(markers, 'click', function(event) {
                        console.log(event.latLng)
                        markersInitArray.map((item, index) =>{
                            if(markersInitArray[index].Lat == event.latLng.getLat() && markersInitArray[index].Lng == event.latLng.getLng()){
                                Lat = event.latLng.getLat();
                                Lng = event.latLng.getLng();
                                latLng = {
                                    Lat: markersInitArray[index].Lat,
                                    Lng: markersInitArray[index].Lng,
                                    id: markersInitArray[index].id
                                };
                            }
                        })
                        var marker = new qq.maps.Marker({
                            position: event.latLng,
                            map: map
                        });
                        pointArr.push(latLng)
                        console.log("当前的坐标数组", pointArr)
                        markersArray.push(marker)
                        qq.maps.event.addListener(marker, 'click', function(e) {
                            pointArr.map((item, index) =>{
                                if(pointArr[index].Lat == e.latLng.getLat()){
                                    selectIndexPoint = index
                                }
                            })
                            isPolyline = false
                            console.log("当前选中的坐标索引值", selectIndexPoint)
                            console.log("当前的坐标数组", pointArr)
                            markersArray[selectIndexPoint].setMap(null)
                            pointArr.splice(selectIndexPoint, 1)
                            markersArray.splice(selectIndexPoint, 1)
                            console.log("删除标记点之后的数组", pointArr)
                            $('#hiddenLatLng').val(pointArr);
                        })
                    })
                    var deleteAllOverlays = document.getElementById("deleteAllOverlays")
                    qq.maps.event.addDomListener(deleteAllOverlays, "click", function() {
                        if (markersArray) {
                            count = 0
                            pointArr = []
                            for (i in markersArray) {
                                markersArray[i].setMap(null);
                            }
                            polylinePath = []
                            markersArray.length = 0;
                            console.log(count, pointArr, markersArray);
                        }
                    })
                })(i)
            }
        }
    }
</script>
</body>
<!-- END BODY -->
</html>